<template>
  <div class="btnGroup">
    <el-button
      v-for="(item, index) in btns"
      :key="index"
      :class="btnClass[item.handle]"
      :type="item.type"
      size="medium"
      :style="{ float: item.pos || 'none', ...item.style }"
      @click="handle(item)"
      >{{ item.title }}</el-button
    >
  </div>
</template>

<script>
export default {
  name: "BtnGroup",
  props: {
    /**
     * title  按钮标题
     * handle 处理标识
     */
    btns: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    btnClass() {
      return {
        delAll: "delAll",
      };
    },
  },
  methods: {
    handle(item) {
      this.$emit("handle", item);
    },
  },
};
</script>

<style lang="scss">
.btnGroup {
  margin: 12px 0 20px;

  // display: flex;
  // align-items: center;
  ::after {
    content: "";
    display: block;
    clear: both;
  }
  > .delAll {
    border-color: #f56c6c;
    color: #f56c6c;
    background-color: #fff;
  }
}
</style>
<style  scoped>
  .btnGroup .el-button--medium{
    padding: 9px 15px;
    font-size: 12px;
    margin-left: 12px;
  }
</style>>

